<script setup>
import { useRoute } from 'vue-router'
import { watch, ref, computed, onMounted } from 'vue'
import Footer from './components/footer.vue'
import Aside from './components/aside.vue'
import Header from './components/headers.vue'
import Electron from './common/js/electron.js'
import { useStore } from 'vuex'

// 假设你已经有了一个页面，并且a标签已经存在

const route = useRoute()
const store = useStore()
const currentPath = ref(route.path)
const main = ref(null)
const sessionLists = computed(() => store.state.sessionMsg)
onMounted(() => {
    store.commit('setData', JSON.parse(localStorage.getItem("data"))||[])
    store.commit('setTabSessionMsg', JSON.parse(localStorage.getItem("data"))[0]?.sessionMsg||[])
    if(main.value){
        setTimeout(() => {
            scrollBottom()
        }, 1000)
    }
})
//监听路由
watch(
    () => route.path,
    (newPath, oldPath) => {
        currentPath.value = newPath
    }
)
//监听当前会话
watch(
    () => store.state.sessionMsg,
    (newPath, oldPath) => {
        if (newPath) {
            setTimeout(() => {
                scrollBottom()
            }, 200)
        }
    },
    {
        deep: true
    }
)
//会话窗口滚动到底部
const scrollBottom = () => {
    main.value.scrollTop = main.value.scrollHeight
}

</script>

<template>
    <div id="app">
        <router-view v-if="currentPath == '/login'" />
        <el-container v-else>
            <el-aside width="250px">
                <Aside />
            </el-aside>
            <el-container>
                <el-header height="50px">
                    <Header />
                </el-header>
                <el-main>
                    <div ref="main" class="main">
                        <router-view />
                    </div>
                </el-main>
                <el-footer height="150px">
                    <Footer />
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="stylus">
#app,.el-container
    height: 100%
    overflow hidden
.el-aside
    border-right: 1px solid #eee
.el-header
    border-bottom: 1px solid #eee
.el-footer
    border-top: 1px solid #eee
    padding: 0 16px
.el-main
    overflow hidden
    padding 0px
    .main
        padding 20px
        height: 100%
        overflow: hidden
        overflow-y: auto
</style>
